import React, { useState, useEffect } from 'react';
import { PeopleItem } from '../Item/PeopleItem'
import Board from '../Board';
import classnames from 'classnames';
import { Link } from 'react-router-dom';

const People = (props) => {
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(true);
    const [icon, setIcon] = useState('');
    const [name, setName] = useState('');
    const [userid, setUserid] = useState('')
    const [albumlist, setAlbumlist] = useState([])
    const [activeTab, setActiveTab] = useState(1);

    const toggle = tab => {
        if (activeTab !== tab) setActiveTab(tab);
    }

    let setrch = async () => {
        if (props.match.params.id !== undefined) {
            setUserid(props.match.params.id);
            let resp = await fetch(`/api/index/getAlbumByUserId?id=` + props.match.params.id);
            if (resp.ok) {
                let data = await resp.json();

                setList(data);
                setLoading(false);
            }
            let respicon = await fetch(`/api/index/getuser?id=${props.match.params.id}`);
            if (respicon.ok) {
                let user = await respicon.json();
                setIcon(user.icon);
                setName(user.name);
            }
            let respalbum = await fetch(`/api/index/getClassByid?userid=${props.match.params.id}`);
            if (respalbum.ok) {
                setAlbumlist(await respalbum.json());
            }
        } else {
        }
    }

    useEffect(() => {
        setrch();
        return () => {

        };
    }, [props.match.url]);
    let change = () => {
        setActiveTab(activeTab == 1 ? 2 : 1);
    }
    let getTotal = (i) => {
        let total = 0;
        for (let index = 0; index < i.album.length; index++) {
            let imgs = i.album[index].imgs.split(',');
            total += imgs.length;
        }
        return total;
    }
    let getIcon = (i) => {
        let url = '';
        if (i.album.length == 0)
            return '';
        else {
            let imgs = i.album[0].imgs.split(',');
            return '/img/'+imgs[0];
        }
    }
    return (
        <div className="content">
            <div className="main-head">
                <div className='people-head'>
                    <div className='people-head-bg'>
                        <img className="header-bg" src="/img/head.jpeg" />
                    </div>
                    <div className='people-head-info'>
                        <div className='people-info'>
                            <a href='javascript:;' className='people-icon'>
                                <img src={`/img/${icon}`}></img>
                            </a>
                            <div className='people-name'>{name} </div>
                        </div>
                    </div>
                    <div className='change'>
                        <a className='btn-change' onClick={change}>{activeTab == 1 ? '我的相册' : '我的动态'}</a>
                    </div>
                </div>
            </div>
            <div className="main-list">

                <div className="left-content">

                    <div className="content-list">
                        {activeTab == 2 ?
                            <div className='albumlist'>
                                {albumlist.map(i => {
                                    return <div className='album-item' key={i.classify.id}>
                                        <Link to={`/album/${i.classify.id}`}>
                                            <div className='album-cover'>
                                                <img src={getIcon(i)}></img>
                                            </div>
                                            <div className='album-info'>
                                                <h3>{i.classify.name}</h3>
                                                <p>{`${getTotal(i)}图片`}</p>
                                            </div>
                                        </Link>
                                    </div>;
                                })}
                            </div> :

                            list.map(i => {
                                return <PeopleItem key={i.id} data={i} />;
                            })
                        }
                    </div>
                </div>
                <div className="right-content">
                    <Board userid={userid} />
                </div>
            </div>
        </div>
    );
}

export default People
